<script setup>
import { onMounted, reactive, watch } from 'vue'
import { graphType } from '../../assets/js/data/assets'

const emits = defineEmits([
  'update:dialogVisible',
  'onSubmit',
  'onCancel'
])

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    require: true
  },
  formData:{
    type: Object,
    require: {
      theme:false
    }
  }
})

// 设置表单
let settingsForm = reactive({
  theme:false,
  type:0,
  hideNode:[],
  nodeSize:[
    {r:70,fontSize:23},
    {r:50,fontSize:20},
    {r:30,fontSize:17}
  ]
})

onMounted(()=>{
  resetForm()
})

watch(
  ()=>props.dialogVisible,
  (newVal)=>{
    if (newVal) {
      resetForm()
    }
  }
)

// 关闭设置弹窗
const handleClose = () =>{
  emits('update:dialogVisible', false)
}

// 应用设置
const handleSubmit = () => {
  handleClose()
  emits('onSubmit', settingsForm)
}

// 取消应用
const handleCancel = () => {
  handleClose()
  emits('onCancel')
}

// 重置表单
const resetForm = () => {
  settingsForm.theme = props.formData.theme
  settingsForm.type = props.formData.type
  settingsForm.hideNode = props.formData.hideNode
  settingsForm.nodeSize = props.formData.nodeSize
}
</script>

<template>
  <!-- 设置弹窗 -->
  <el-dialog
    :model-value="dialogVisible"
    title="设置"
    width="600"
    align-center
    @closed="handleClose"
  >
  <el-form :model="settingsForm" label-width="auto" style="max-width: 600px">
    <el-form-item label="深色模式">
      <el-switch v-model="settingsForm.theme" />
    </el-form-item>
    <el-form-item label="图谱模式">
      <el-radio-group v-model="settingsForm.type">
        <el-radio v-for="(item,index) in graphType" :key="index" :value="item.id">{{item.name}}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="隐藏节点">
      <el-checkbox-group v-model="settingsForm.hideNode">
        <el-checkbox :value="0" name="type">
          根节点
        </el-checkbox>
        <el-checkbox :value="1" name="type">
          1级节点
        </el-checkbox>
        <el-checkbox :value="2" name="type">
          2级节点
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="更改节点半径">
      <el-input-number v-model="settingsForm.nodeSize[0].r" size="small" style="width: 100px;" />
      <el-input-number v-model="settingsForm.nodeSize[1].r" size="small" style="margin-left: 10px; width: 100px;"/>
      <el-input-number v-model="settingsForm.nodeSize[2].r" size="small" style="margin-left: 10px; width: 100px;"/>
    </el-form-item>
    <el-form-item label="更改节点文本大小">
      <el-input-number v-model="settingsForm.nodeSize[0].fontSize" size="small" style="width: 100px;" />
      <el-input-number v-model="settingsForm.nodeSize[1].fontSize" size="small" style="margin-left: 10px; width: 100px;"/>
      <el-input-number v-model="settingsForm.nodeSize[2].fontSize" size="small" style="margin-left: 10px; width: 100px;"/>
    </el-form-item>
  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>

</style>
